import React, { useState, useEffect } from "react";
import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";
import Article from "../../api/article/index";
import "./index.less";

// export default TrendChart;
function TrendChart() {
  useEffect(() => {
    getWords();
  }, []);
  const [data, setWords] = useState([
    {
      text: "Web前端",
      value: 38
    },
    {
      text: "go语言",
      value: 52
    }
  ]);
  // 获取标签云
  const getWords = () => {
    Article.words().then(res => {
      if (res.code === 200) {
        res.data.forEach(res => {
          res.value = Number(res.value);
        });
        setWords(res.data);
      }
    });
  };

  return (
    <div className="chart">
      <Chart height={500} data={data} forceFit padding={[40, 20, 30, 50]}>
        <Axis name="text" />
        <Axis name="value" />
        <Legend position="top" dy={-20} />
        <Tooltip
          crosshairs={{
            type: "y"
          }}
        />
        <Geom type="interval" position="text*value" />
      </Chart>
    </div>
  );
}

export default TrendChart;
